<script setup>
import { ref, watch } from 'vue'
import { jsonp } from '@/utils/jsonp'

const props = defineProps({
  showSearchResult: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['changePosition', 'handleChangeShow'])

const value = ref('')
const qqMapKey = 'FQWBZ-PJXEU-LRZV2-BUBN5-AFKGO-R6BKQ'

const onSearch = () => {
  if (value.value) {
    const params = new URLSearchParams()
    params.append('key', qqMapKey)
    params.append('keyword', value.value)
    params.append('page_size', '20')
    const url = `https://apis.map.qq.com/ws/place/v1/suggestion?${params.toString()}`

    jsonp(url, { output: 'jsonp' })
      .then((res) => {
        searchResult.value = res.data
        emit('handleChangeShow', true)
      })
      .catch((err) => {
        console.error('搜索失败:', err)
      })
  }
}

const searchResult = ref([])

const handleSearchItemClick = (item) => {
  const position = {
    longitude: item.location.lng,
    latitude: item.location.lat,
  }
  emit('changePosition', position)
  emit('handleChangeShow', false)
}

const handleClickSearchInput = () => {
  if (!props.showSearchResult) {
    emit('handleChangeShow', false)
  }
}

watch(
  () => value.value,
  (val) => {
    if (!val) {
      emit('changePosition')
    }
  }
)
</script>

<template>
  <div class="map-search">
    <el-input
      v-model="value"
      style="max-width: 300px"
      placeholder="请输入地址"
      class="input-with-select"
      @focus="handleClickSearchInput"
      @keydown.enter.native="onSearch"
    >
      <template #append>
        <el-button icon="el-icon-search" @click="onSearch" />
      </template>
    </el-input>

    <div class="search-result" v-show="showSearchResult && searchResult.length">
      <div
        class="search-result-item"
        v-for="(item, index) in searchResult"
        :key="item.id"
        @click="handleSearchItemClick(item)"
        :data-index="index"
      >
        <span class="title">{{ item.title }}</span>
        <span class="location">{{ item.city }}-{{ item.district }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.map-search {
  position: relative;

  .el-input {
    height: 40px;
  }

  .search-result {
    position: absolute;
    top: 40px;
    left: -20px;
    z-index: 9999;
    width: 260px;
  }
}
.search-result {
  margin-left: 12px;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow-y: auto;
  max-height: 260px;

  &-item {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;

    &:not(:first-of-type) {
      border-top: 1px solid #f3f3f9;
    }
    &:first-of-type {
      margin-top: 5px;
    }
    &:last-of-type {
      margin-bottom: 5px;
    }
    &:active {
      background-color: #f3f3f3;
    }

    > .title {
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 15px;
    }
    > .location {
      color: #bbbbbb;
      font-size: 12px;
    }
  }
}
</style>
